﻿﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/wwwroot/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        body {
            background: #f5f7fa;
            min-height: 100vh;
            padding: 2rem 0;
        }
        
        .page-header {
            background: #fff;
            padding: 1.5rem;
            margin: -2rem -1.5rem 2rem;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            border-bottom: 1px solid #eee;
        }
        
        .card {
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .card-body {
            padding: 2rem;
        }
        
        .form-control {
            border-radius: 4px;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        
        .btn {
            border-radius: 4px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #007bff;
            border-color: #007bff;
        }
        
        .btn-primary:hover {
            background: #0069d9;
            border-color: #0062cc;
        }
        
        .btn-secondary {
            background: #6c757d;
            border-color: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
            border-color: #545b62;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            display: none;
            z-index: 1000;
        }
        
        .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        @media (max-width: 576px) {
            .card-body {
                padding: 1.5rem;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }
    </style>
    <title>新建目录</title>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h2><i class="fas fa-folder-plus"></i> 新建目录</h2>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="dirName">目录名称</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="dirName" 
                                   placeholder="请输入目录名称"
                                   maxlength="50">
                            <small class="form-text text-muted">最多50个字符</small>
                        </div>

                        <div class="text-right mt-4">
                            <button id="backBtn" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> 返回
                            </button>
                            <button id="confirmBtn" class="btn btn-primary ml-2">
                                <i class="fas fa-check"></i> 确认
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="loading-overlay">
        <div class="spinner"></div>
    </div>

    <script src="/wwwroot/common/js/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                positionClass: "toast-top-center",
                timeOut: 3000
            };

            $('#backBtn').on('click', function() {
                window.history.back();
            });

            $('#confirmBtn').on('click', function() {
                const dirName = $('#dirName').val().trim();
                
                if (!dirName) {
                    toastr.error('请输入目录名称');
                    $('#dirName').focus();
                    return;
                }

                if (dirName.length > 50) {
                    toastr.error('目录名称不能超过50个字符');
                    return;
                }

                $('.loading-overlay').show();
                
                const parentGuid = new URLSearchParams(window.location.search).get('parentGuid') || '';
                const spaceType = new URLSearchParams(window.location.search).get('spaceType') || '1';
                const token = localStorage.getItem('token');

                $.ajax({
                    url: 'http://localhost:8060/api/file/createDir',
                    method: 'POST',
                    headers: {
                        'Authorization': token
                    },
                    data: {
                        parentGuid: parentGuid,
                        name: dirName,
                        spaceType: spaceType
                    },
                    success: function(response) {
                        $('.loading-overlay').hide();
                        toastr.success('目录创建成功');
                        setTimeout(() => {
                            const parentGuid = new URLSearchParams(window.location.search).get('parentGuid') || '';
                            const spaceType = new URLSearchParams(window.location.search).get('spaceType') || '1';
                            window.location.href = `list.html?parentGuid=${parentGuid}&spaceType=${spaceType}`;
                        }, 1500);
                    },
                    error: function(xhr) {
                        $('.loading-overlay').hide();
                        const errorMsg = xhr.responseJSON?.message || '目录创建失败';
                        toastr.error(errorMsg);
                    }
                });
            });

            $('#dirName').on('keypress', function(e) {
                if (e.which === 13) {
                    $('#confirmBtn').trigger('click');
                }
            });
        });
    </script>
</body>
</html>
